<template>
  <div class="search-container">
    <div class="header">
      <div class="header-title">
        <h2>搜索</h2>
      </div>
      <div class="header-actions">
        <span class="close-icon" @click="closeSearch">×</span>
      </div>
    </div>
    <div class="search-input-box">
      <input type="text" placeholder="你想去哪儿?" v-model="searchText" class="search-input custom-input">
      <!--            <el-input-->
      <!--                placeholder="你想去哪儿?"-->
      <!--                prefix-icon="el-icon-search"-->
      <!--                class="search-input custom-input"-->
      <!--                v-model="searchText"-->
      <!--            />-->
    </div>
    <div class="search-history-section">

      <div class="history-title">
        <span>搜索历史</span>
        <span class="delete-all" @click="deleteAllHistory">删除全部</span>
      </div>
      <div class="history-list">
        <div class="history-item" v-for="(item, index) in filteredHistoryList" :key="index" @click="selectHistory(item)">
          <img :src="item.image" alt="history" class="history-item-img">
          <div class="history-item-info">
            <p class="location">{{ item.location }}</p>
            <p class="details">{{ item.details }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      historyList:[
        {
          image: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/02/00/Cg-4WVVxDyCIKnU-AAQxnMGr9K0AAEryAA_QZEABDG0238.jpg', // 替换为实际图片地址
          location: '伦敦London',
          details: '1间 - 2人\n12 - 22 3月'
        },
        {
          image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.9Kw-HtIOCE48e2c2zrXLpAHaEo?rs=1&pid=ImgDetMain', // 替换为实际图片地址
          location: '巴黎Paris',
          details: '1间 - 2人\n12 - 22 3月'
        },
        {
          image: 'https://img1.qunarzz.com/travel/poi/1505/e4/18fdf20f5edf1e.jpg', // 替换为实际图片地址
          location: '东京Tokyo',
          details: '1间 - 2人\n12 - 22 3月'
        },
        {
          image: 'https://img1.pconline.com.cn/piclib/200906/15/batch/1/35358/12450297668892ql6x9sgvx.jpg',
          location: '夏威夷Hawaii',
          details: '1间 - 2人\n12 - 22 3月'
        }
      ]
    };
  },
  computed: {
    filteredHistoryList() {
      if (!this.searchText) {
        return this.historyList;
      }
      return this.historyList.filter(item =>
          item.location.toLowerCase().includes(this.searchText.toLowerCase()) ||
          item.details.toLowerCase().includes(this.searchText.toLowerCase())
      );
    }
  },
  methods: {
    closeSearch() {
      // 关闭搜索页面的逻辑，比如返回上一页
      console.log('关闭搜索页面');
      this.$router.push('/homePage');
    },
    deleteAllHistory() {
      this.historyList = [];
      console.log('删除所有搜索历史');
    },
    selectHistory(item) {
      // 选择搜索历史项的逻辑，比如填充搜索框等
      this.searchText = item.location;
      console.log('选择搜索历史:', item.location);
    },
    fanhui(){
      this.$router.push('homepage');
    }

  }
};
</script>

<style scoped>
.search-container {
  padding: 20px;
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.header-title {
  flex: 1;
  text-align: center;
}
.header-actions {
  flex: 0;
}
.close-icon {
  font-size: 24px;
  cursor: pointer;
}
.search-input-box {
  position: relative;
  margin-bottom: 20px;
}
.search-input {
  width: 85%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 40px;
}
.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #999;
}
.custom-input{
  border-radius: 25px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 底部阴影 */
}

.search-history-section {
  width: 100%;
}
.history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #333;
}
.delete-all {
  color: #00c6ff;
  cursor: pointer;
}
.history-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.history-item {
  width: 32%;
  margin-bottom: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.history-item-img {
  width: 100%;
  display: block;
}
.history-item-info {
  padding: 10px;
}
.location {
  font-size: 16px;
  margin-bottom: 5px;
}
.details {
  font-size: 14px;
  color: #666;
}
</style>
